<template>
  <div class="sectiondiv">
    <el-descriptions class="margin-top" title="基本设置" :column="1" >
      <el-descriptions-item label="头像">
      <el-upload
  class="avatar-uploader"
  action="http://localhost:3000/api/uploadHeadPic"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  :headers="myheaders">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      </el-descriptions-item>
      <el-descriptions-item label="昵称">
        <span style="position: relative;top: -8px;margin-right: 10px;">{{shuju.name}}</span>&nbsp;&nbsp;&nbsp; 
        <el-button type="text" @click="open" style="position:relative;top:-8px">修改昵称</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions class="margin-top" title="安全设置" :column="1">
      <el-descriptions-item label="密码设置">
        <el-button type="primary"><router-link active-class="active" to="/changePwd" class="changepwd">修改密码</router-link></el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
  
<script scoped>
export default {
  name: 'AccountView',
  data() {
    return {
      user: {},
      imageUrl: '',
      myheaders: {
        Authorization: localStorage.getItem('token')
      }
    };
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('currentUser'))
    this.imageUrl = 'http://localhost:3000/upload/' + this.shuju.headpic
  },
  methods:{
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      let id = this.shuju._id
      this.axios.get('/api/getUserInfoById', { params: { userId: id } })
        .then(res => {
          this.$store.state.user= res.data.user
        })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    open() {
      this.$prompt('请输入新昵称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        let id = this.shuju._id
        this.axios.post('/api/changeName', { newname: value, userId: id })
          .then(res => {
            this.axios.get('/api/getUserInfoById', { params: { userId: id } })
              .then(res => {
                this.$store.state.user= res.data.user
              })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
  computed:{
    shuju(){
      console.log(this.$store.state.user);
      return this.$store.state.user
    }
  }
}
</script>

<style scoped>
.sectiondiv {
  width: 700px;
  padding: 20px 40px;
  background-color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.avatar {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
}
.changepwd{
  text-decoration: none;
}
</style>